<template>
  <!-- 面包屑导航区 -->
  <el-breadcrumb separator=">">
    <el-breadcrumb-item :to="{ path: '/welcome' }">
      首页
    </el-breadcrumb-item>
    <!-- <el-breadcrumb-item v-for="item in breadList" :key="item.path" :to="item.path"> -->
    <el-breadcrumb-item v-for="item in breadList" :key="item.path">
      {{ item.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      breadList: []
    }
  },
  created() {
    // 获取当前路由相关信息
    const dataList = this.$route.matched
    this.getBreadList(dataList[dataList.length - 1])
  },
  methods: {
    // 生成对应路由的面包屑数据
    getBreadList(item) {
      const obj = {
        name: item.name,
        path: item.path
      }
      this.breadList.push(obj)
      while (item.parent) {
        item = item.parent
        const obj = {}
        obj.name = item.name
        obj.path = item.path
        this.breadList.push(obj)
      }
      this.breadList = this.breadList.reverse()
    }
  }
}
</script>

<style scoped>
.el-breadcrumb{
  font-size: 14px;
  margin-bottom:35px;
}
</style>
